<script setup lang="ts">
import { watch, ref, onUnmounted, inject, reactive, onMounted } from "vue";
import { queryById } from "@/api/visual/visualConfig";
import dayjs from "dayjs";

const flattenTreeData = inject("curTreeData", ref({}));

const tagBgColorList = {
  一级报警: "#E02B2B",
  二级报警: "#FF771E",
  三级报警: "#F1B11A",
  四级报警: "#4A9BFF"
};
const tagLabelList = {
  一级报警: "一级",
  二级报警: "二级",
  三级报警: "三级",
  四级报警: "四级"
};
const props = defineProps({
  twinIds: {
    type: Array,
    default: () => []
  },
  isDialog: {
    type: Boolean,
    default: false
  }
});
const tableData = ref([]);
onMounted(async () => {
  if (flattenTreeData.value) {
    const [startTime, endTime] = getTodayTimeRange();
    let params = {
      alarmCenterFlag: "YES",
      startTime,
      endTime,
      alarmStatus: ["ON"],
      visualizationAlarmFlag: "YES",
      pageSize: 1000
    };
    if (props.twinIds.length == 1) {
      const cur = flattenTreeData.value[props.twinIds[0]];
      if (cur) {
        const { type, code } = cur;
        if (type === "BUILD") {
          params["buildingId"] = code;
        } else if (type === "FLOOR") {
          params["floorId"] = code;
        } else if (type === "ROOM") {
          params["visualizationRoomId"] = code;
        }
      }
    } else {
      params["twinId"] = props.twinIds;
    }
    let data = await queryById(params);
    tableData.value = data?.data || [];
  }

  console.log(tableData.value);
});

function getTodayTimeRange() {
  // 获取当天零点时间 (格式: YYYY-MM-DD 00:00:00)
  const startOfDay = dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss");

  // 获取当前时间 (格式: YYYY-MM-DD HH:mm:ss)
  const currentTime = dayjs().format("YYYY-MM-DD HH:mm:ss");

  return [startOfDay, currentTime];
}
</script>
<template>
  <div class="table-wrapper" :class="{ 'table-pos': !isDialog }">
    <vxe-table
      height="224"
      :column-config="{ resizable: true }"
      :scroll-y="{ enabled: true, gt: 0 }"
      border="none"
      style="border: 0"
      :data="tableData"
      size="mini"
    >
      <vxe-column field="alarmLevel" title="级别" align="left" width="60">
        <template #default="{ row }">
          <px-tag style="color: #fff" round :color="tagBgColorList[row.alarmLevel]"> {{ tagLabelList[row.alarmLevel] }} </px-tag>
        </template>
      </vxe-column>
      <vxe-column field="alarmTime" title="发生时间" align="left" min-width="75">
        <template #default="{ row }">
          <px-tooltip class="box-item" effect="dark" :content="row.alarmTime" placement="top-end">
            <div class="w-[75%] overflow-ellipsis overflow-hidden whitespace-nowrap">{{ row.alarmTime }}</div>
          </px-tooltip>
        </template>
      </vxe-column>
      <vxe-column field="alarmContent" title="报警内容" align="left" min-width="105">
        <template #default="{ row }">
          <px-tooltip class="box-item" effect="dark" :content="row.alarmContent" placement="top-end">
            <div class="w-[75%] overflow-ellipsis overflow-hidden whitespace-nowrap">{{ row.alarmContent }}</div>
          </px-tooltip>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>
<style lang="scss" scoped>
.table-wrapper {
  width: 400px;
  padding: 8px;
  margin-bottom: 2px;
  background: rgb(255 255 255 / 75%);
  backdrop-filter: blur(10px);
  border-radius: 8px;
}

.table-pos {
  position: absolute;
  top: -35px;
  left: 28px;
}

:deep(.vxe-table) {
  /* 全局滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px; /* 垂直滚动条宽度 */
    height: 6px; /* 水平滚动条高度 */
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #f5f5f5; /* Element Plus 风格的浅灰色轨道 */
    border-radius: 3px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    background: #c0c4cc; /* Element Plus 中性色 */
    border-radius: 3px;
    transition: background-color 0.2s; /* 添加悬停动画 */
  }

  /* 悬停时滑块颜色加深 */
  ::-webkit-scrollbar-thumb:hover {
    background: #909399;
  }
}
</style>
